import React, { Component } from 'react'
import { Menu } from 'antd';
import {Link, withRouter} from 'react-router-dom'
import menuList from '../../../config/menuConfig'
// import { MenuUnfoldOutlined,MenuFoldOutlined } from '@ant-design/icons';
import  * as Icon from '@ant-design/icons';
import './css/leftNav.less'
import {connect} from 'react-redux'
import {saveTitleInRedux} from '../../../redux/actions_creators/menu'
const {SubMenu}  = Menu

@connect (
  state => ({}),
  {
    saveTitleInRedux
  }
)
@withRouter
class LeftNav extends Component {
  state = {
    collapsed: false,
    openKeys: []
  }
  // toggleCollapsed = () => {
  //   this.setState({
  //     collapsed: !this.state.collapsed,
  //   });
  // }
  handleSubMenuOpen = (value) => {
    this.setState({openKeys: [value[value.length-1]]})
  }
  saveTitle = () => {
    const path = this.props.location.pathname
    let res =  ''
    menuList.forEach(item => {
      if(item.children) {
        item.children?.forEach(child => {
          if (child.key === path) {
            res = child.title
          }
        })
      } else {
        if (item.key === path) {
          res = item.title
        }
      }
    })
    this.props.saveTitleInRedux(res)
  }
  createMenu = list => {
    return (
      list.map(item => {
        if (!item.children) {
          return (
            <Menu.Item key={item.icon} onClick={this.saveTitle(item.title)}
            >
              <Link to={item.key}>
                {
                  React.createElement(
                      Icon[item.icon],
                      {
                        style: {
                          fontSize: '16px',
                          color: '#395668',
                          marginRight: '20px'
                        }
                      }
                  )
                }
                {item.title}
              </Link>
            </Menu.Item>
          )
        } else {
          return (
            <SubMenu key={item.key} title={item.title} icon={
                React.createElement(
                    Icon[item.icon],
                    {
                      style: {
                        fontSize: '16px',
                        color: '#395668',
                        marginRight: '10px'
                      }
                    }
                )
            }>
              {
                this.createMenu(item.children)
              }
            </SubMenu>
          )
        }
      })
    )
  }
  render() {
    return (
      <div className="left-nav">
        <header className="left-nav-header">
          <div>💻</div>
          <h1>React管理系统</h1>
        </header>
        {/* <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
          {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
        </Button> */}

        <Menu
          onOpenChange={this.handleSubMenuOpen}
          defaultSelectedKeys={this.props.location.pathname}
          openKeys={this.state.openKeys}
          mode="inline"
          theme="dark"
          // inlineCollapsed={this.state.collapsed}
        >
          {
            this.createMenu(menuList)
          }
        </Menu>
      </div>
    )
  }
}

export default LeftNav